<template>
	<view class="content">
		<block class="" v-if="barlist.length>0">
			<view class="nav" :style="{ 'height': Height + 'px' }">
				<view class="bar" :style="{ 'height': Height + 'px' }">
					<view class="itembar" :class="[index === current? 'check_sty' : 'oncheck_sty']"
						v-for="(item,index) in barlist" :key="item.id" :data-current="index"
						@click="(e)=>select(e,item)">
						{{item.name}}
					</view>
				</view>

				<!-- 循环方法 -->
				<view class="goods_wrap">
					<view class="mains" v-for="(item,index) in barlist.length" :key="item.id">
						<!--根据current显示不同内容 -->
						<view class="main" :style="{ 'height': Height + 'px' }" v-show="current==index">
							<!-- 这是内容{{index}} 为了区分显示内容删除即可 -->
							<scroll-view scroll-y="true" v-if="dataList.length>0" :refresher-triggered="triggered"
								refresher-enabled @refresherrefresh="onRefresh" @refresher-abort="onRefresherAbort"
								show-scrollbar :lower-threshold="100" @scrolltolower="loadMore"
								:style="{ 'height': Height + 'px' }" class="scroll-Y">
								<view class="scroll-view-item" v-for="(item, index) in dataList" @tap="jumpDetail(item)"
									:key="index">
									<view class="view_wrap" @click="onDetail(item)">
										<view class="img_sty">
											<image :src="item.item_img" mode="aspectFill"></image>
										</view>
										<view class="goods_desc">
											<view class="g_name">
												<!-- 汤臣倍健蛋白粉600g礼盒 -->
												{{item.goodsName}}
											</view>
											<view class="g_num">
												<!-- 月售 {{item.showNum || 0 }}+件 -->
											</view>

											<view class="g_price">
												<cn-money :money="item.storePrice/100" color="#FE2C55"
													:size="38"></cn-money>
												<!-- ￥<text class="g_price_red"> {{item.showPrice}}</text> -->
											</view>
										</view>
									</view>

									<view class="footer_wrap">
										<view class="num_sty">
											<button class="share_sty" size="default" @click.stop="addCart(item)"
												:loading="item.upCart" :disabled="item.upCart">加入购物车
											</button>
											<div class="PosTin_num" v-if="item.isBuy==1">{{item.num}}</div>
										</view>

										<view class="share_btn_wrap" >
											<view class="share_btn" @click="onShare(item)">
												分享商品
											</view>
										</view>

									</view>
								</view>



								<view v-if="ishow && dataList.length>10"
									:class="dataList.length==0? 'NoMnore':'period' ">
									~没有更多数据~
								</view>

								<view style="height: 150rpx;width: 100%;">

								</view>
							</scroll-view>

							<view v-else class="empty-Iwrap">
								<image src="@/static/home/item-emtpy.png" mode="widthFix"
									style="height: 240rpx; width: 240rpx; "></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</block>

		<view class="Empty-wrap" v-else>
			<image src="@/static/home/homeEmpty.png" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	
	import {
		goodsList
	} from "@/api/apis.js"
	import {
		mapState,
		mapMutations
	} from "vuex";
	export default {
		props: {
			barlist: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				listQuery: {
					pageNo: 1,
					pageSize: 10,
				},
				triggered: false, //下拉刷新状态
				ishow: false,
				current: 0,
				Height: '',
				storeGoodsGroupId: 0, //分组id
				dataList: []
			}
		},
		mounted() {
			// 注意，这里要用个变量存this，不然进到getSystemInfo后this指向会变化，找不到data变量
			var _this = this
			uni.getSystemInfo({
				success: function(res) {
					// console.log(res.screenHeight); // 屏幕高度，包含导航栏
					// console.log(res.windowHeight); // 能够使用的窗口高度，不包含导航栏
					// console.log(res.screenWidth); // 屏幕宽度
					// console.log(res.windowWidth); //  能够使用的窗口宽度
					// _this.Height = res.windowHeight - 90;
					_this.Height = res.screenHeight

				}
			});
		},
		computed: {
			...mapState("userInfo", ["Info"]),
		},
		methods: {
			select(e, item) {
				let index = e.target.dataset.current || e.currentTarget.dataset.current;
				this.current = index;
				this.triggered = false
				this.$emit('grouping', item)
			},


			//点击事件
			jumpDetail(e) {
				this.$emit("itemClick", e);
			},

			// 购物车
			addCart(item) {
				item.number++;
				item.upCart = true
				this.$emit("onAdd", item);
			},

			// 分享
			onShare(item) {
				this.$emit("shareGoods", item);
			},

			// 设置加载状态
			setItem(item, status) {
				item.upCart = false
				if (status) {
					item.num++
					item.isBuy = 1
				}
			},


			// 近步器
			handleChange(e, item) {
				this.$emit("onAdd", item);
			},


			listInit(params) {
				this.storeGoodsGroupId = params.storeGoodsGroupId //首次加载时，先保存一下分组
				this.listQuery.pageNo = 1

				this.listQuery.customerId = params.customerId //用户Id
				this.listQuery.storeGoodsGroupId = params.storeGoodsGroupId //分组ID
				this.listQuery.storeId = params.storeId //	店铺ID
				this.dataList = []
				this.isBottom = false
				this.getList()
			},
			async getList() {
				this.triggered = true
				let query = this.listQuery
				//请求数据 ，此为封装后的请求接口方法
				// console.log('分页参数', query);
				let list = await goodsList(query)
				let records = list.result //编辑数据
				for (var i = 0; i < records.length; i++) {
					records[i].number = 0
					records[i].item_img = JSON.parse(records[i].goodsPhotos)[0]
					records[i].upCart = false
				}
				this.dataList = this.dataList.concat(records)
				//判断是否请求完毕
				// console.log('请求完成了', list.result.length, this.listQuery.pageSize);
				if (list.result.length < this.listQuery.pageSize) {
					this.isBottom = true
					this.ishow = true
				}
				this.triggered = false
			},


			// 下拉加载
			onRefresh() {
				// console.log(
				// 	!this.triggered);
				if (!this.triggered) {
					this.listQuery.pageNo = 1
					this.isBottom = false
					this.dataList = []
					this.getList()
				}
				// 在这里执行数据加载的逻辑，例如发起网络请求
				// 加载完成后，可以调用 onRefresherRestore 或 onRefresherAbort 结束刷新状态
			},

			onRefresherRestore() {
				this.triggered = false
				// console.log('刷新结束，恢复滚动位置');
			},
			onRefresherAbort() {
				// console.log('刷新被取消');
			},

			// 滚到底部
			loadMore() {
				if (this.ishow) return false
				// console.log('触底了', this.ishow);
				if (!this.isBottom) {
					this.listQuery.pageNo += 1
					this.getList()
				}
			},

			// 订单详情
			onDetail(item) {
				this.$emit('onItem', item.id)
			},

		}

	}
</script>

<style lang="scss" scoped>
	.empty-Iwrap {
		height: 100%;
		width: 100%;
		display: flex;
		justify-content: center;
		padding-top: 360rpx;
	}

	/* 追加样式 */
	.content {
		margin-top: 10rpx;

		.Empty-wrap {
			height: 100vh;
			width: 100%;
			display: flex;
			justify-content: center;
			// align-items: center;
			margin-top: 240rpx;
		}
	}

	.check_sty {
		/* width: 144rpx; */
		background: #ffffff;
		color: #000;
		border-radius: 0 15rpx 15rpx 0;
	}

	.oncheck_sty {
		// background: #f8f8f8;
		color: #7F7F7F;
	}

	/* 侧边导航栏部分 */
	.nav {
		/* max-width: 160rpx; */
		display: flex;
		/* justify-content: space-between; */
		justify-content: flex-start;

	}

	.nav>.bar {
		width: 20%;
		width: 160rpx;
		height: 1100rpx;
		overflow-y: auto;
		/* width: 150upx; */
		// display: flex;
		/* background: #00aaff; */
		// flex-direction: column;

	}

	.nav>.bar>.itembar {
		// width: 144rpx;
		height: 116rpx;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		// font-pageSize: 26upx;
		font-size: 26rpx;

	}

	.goods_wrap {
		width: 100%;
		box-sizing: border-box;
		padding: 0 24rpx 0 16rpx;
	}

	scroll-view {
		/* 去除滚动条 */
		scrollbar-width: none !important;
		-ms-overflow-style: none !important;
	}

	.scroll-view-item {
		width: 100%;
		margin-top: 16rpx;
		padding: 24rpx;
		// padding-bottom: 24rpx;
		// height: 256rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		/* 	margin: 20upx 20upx; */
		// background-color: #ffffff;

		.view_wrap {
			display: flex;

			.img_sty {
				>image {
					width: 136rpx;
					height: 136rpx;
					border-radius: 12rpx;
				}
			}

			.goods_desc {
				margin-left: 24rpx;
				font-weight: 400;

				.g_name {
					font-pageSize: 28rpx;
					color: #000000;
					line-height: 44rpx;
				}

				.g_num {
					font-size: 20rpx;
					color: #767676;
					line-height: 32rpx;
				}

				.g_price {
					color: $uni-color-theme;
					margin-top: 20rpx;

					.g_price_red {
						font-weight: bold;
						font-size: 40rpx;
						line-height: 40rpx;
					}
				}
			}
		}

		.footer_wrap {
			display: flex;
			justify-content: end;
			justify-content: flex-end;
			align-items: center;
			// display: -webkit-flex;
			// -webkit-justify-content: flex;
			// -webkit-align-items: center;

			.share_btn_wrap {

				.share_btn {
					width: 160rpx;
					height: 60rpx;
					background: #FE2C55;
					border-radius: 12rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #FFF;
					text-align: left;
					font-style: normal;
					text-transform: none;
					// width: 84rpx;
					// height: 48rpx;
					// background: linear-gradient(180deg, #F5DECA 0%, #EABD9E 100%);
					// border-radius: 12rpx;


					// font-family: PingFang SC, PingFang SC;
					// font-weight: 400;
					// font-size: 24rpx;
					// color: #68480C;
					// line-height: 24rpx;
					// font-style: normal;
					// text-transform: none;
				}
			}

			.num_sty {
				position: relative;
				margin-right: 20rpx;

				.share_sty {
					height: 60rpx;
					background: linear-gradient(180deg, #F5DECA 0%, #EABD9E 100%);
					border-radius: 12rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #68480C;
					display: flex;
					justify-content: center;
					align-items: center;
					// width: 190rpx;
					// height: 48rpx;
					// background: $uni-color-theme;
					// font-size: 20rpx;
					// color: #fff;
					// border-radius: 20rpx;
				}

				.PosTin_num {
					background-color: #FD702B;
					position: absolute;
					border-radius: 50%;
					text-align: center;
					line-height: 35rpx;
					top: -35%;
					z-index: 9;
					font-size: 20rpx;
					right: 0;
					color: #fff;
					height: 40rpx;
					width: 40rpx;
				}
			}


			// .share_sty {
			// 	>image {
			// 		width: 48rpx;
			// 		height: 48rpx;
			// 	}
			// }

			// .num_sty {
			// 	display: flex;
			// }
		}
	}

	::v-deep .uv-number-box {
		justify-content: space-between;
	}

	::v-deep .uni-scroll-view-refresher {
		height: 100%
	}

	// 进步器
	.icon_sty {
		width: 48rpx;
		height: 48rpx;
	}

	.input {
		padding: 0 10rpx;
		width: 100rpx;
		height: 48rpx;
		background: #F7F7F7;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
	}

	// 没有数据时
	.NoMnore {
		margin: 10px 0;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 60vh;
	}

	// 加载全部数据时
	.period {
		margin: 10px 0;
		text-align: center;
	}
</style>